import React from 'react';
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import AuthForm from "./components/AuthForm";
import HeroSection from './components/HeroSection';
import Home from './agent/Home';
import RightMask from "./agent/components/right-mask-body";
import ChatPage from "./agent/components/ChatPage";
import Session from "./agent/components/session";
import FitnessHomepage from './components/FitnessHomepage';
import Watch from './components/watch';
import AllVideo from './components/AllTheVideo';

// 集中配置所有路由
const router = createBrowserRouter([
  // 登录页（一级路由）
  { path: "/", element: <AuthForm /> },
  
  // 主页框架（一级路由，含子路由）
  {
    path: "/HeroSection",
    element: <HeroSection />, // 父组件（需含<Outlet />）
    children: [
      // 主页容器（二级路由，含子路由）
      {
        path: "", // 相对路径：/HeroSection
        element: <Home />, // 父组件（左侧固定导航）
        children: [
          // 主页右侧内容（三级路由）
           { path: "", element: <RightMask /> },
          { path: "select", element: <RightMask /> }, // /HeroSection
          { path: "Chat", element: <ChatPage /> }, // /HeroSection/Chat
          { path: "session", element: <Session /> }, // /HeroSection/session
        ],
      },
    ],
  },
  { path: "/FitnessHomepage", element: <FitnessHomepage /> },
  { path: "/Watch", element: <Watch /> },
  { path: "/AllVideos", element: <AllVideo /> },
  { path: "*", element: <div>页面未找到</div> }
]);

function App() {
  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  );
}

export default App;
